<template>
  <!-- 账户变动审核 -->
  <div>
    <!-- 头部区域 -->
    <div class="header">
      <!-- 时间选择器 -->
      <div class="block">
        <el-date-picker
          v-model="selectedAccountTimestamp"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="timestamp"
          style="width: 400px; margin: 0px 6px 0px 0px"
          size="mini"
        >
        </el-date-picker>
      </div>
      <!-- 类型下拉框 -->
      <el-select
        size="mini"
        v-model="accountTypeValue"
        clearable
        placeholder="请选择类型"
        style="width: 200px; margin: 0px 6px"
      >
        <el-option label="充值" value="充值"> </el-option>
        <el-option label="提现" value="提现"> </el-option>
      </el-select>
      <!-- 状态下拉框 -->
      <el-select
        v-model="accountStatusValue"
        clearable
        placeholder="请选择状态"
        size="mini"
        style="width: 200px; margin: 0px 6px"
      >
        <el-option label="通过" value="通过"> </el-option>
        <el-option label="不通过" value="不通过"> </el-option>
        <el-option label="未审核" value="未审核"> </el-option>
      </el-select>
      <!-- 申请人编号输入框 -->
      <el-input
        size="mini"
        style="width: 200px; height: 30px; margin: 0px 6px"
        placeholder="申请人编号"
        v-model="inputAccountId"
        clearable
      >
      </el-input>
      <!-- 查询按钮 -->
      <el-button
        size="mini"
        type="primary"
        @click="queryAllAccountData()"
        style="margin: 0px 6px; height: 28px"
        >查询</el-button
      >
    </div>
    <!-- 表格区域 -->
    <div class="tableArea">
      <el-table :data="accountData" style="width: 100%">
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="userId" label="申请人编号" align="center">
        </el-table-column>
        <el-table-column
          prop="applyTime"
          :formatter="dateFormat"
          label="申请时间"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="applyType" label="变更类型" align="center">
        </el-table-column>
        <el-table-column label="变更资金" align="center">
          <template slot-scope="scope">
            <span>￥ </span
            ><span style="color: red; font-size: 18px">{{
              scope.row.money
            }}</span
            ><span> 元</span>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="变更原因" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '通过'" type="success" size="mini"
            >通过</el-tag
          >
          <el-tag v-if="scope.row.status === '不通过'" type="danger" size="mini"
            >不通过</el-tag
          >
          <el-tag v-if="scope.row.status === '未审核'" type="info" size="mini"
            >未审核</el-tag
          >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
          <el-button type="text" size="small" @click="auditPass(scope.row.id)"
            >通过</el-button
          >
          <el-button
            type="text"
            size="small"
            style="color: red"
            @click="auditFail(scope.row.id)"
            >不通过</el-button
          >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页区域 -->
    <div class="pageSelect">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 审核不通过模态框 -->
    <div class="dialog">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
          placeholder="输入不通过的理由"
          v-model="passReasonTextarea"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="reasonDialogCancel()">取 消</el-button>
          <el-button type="primary" @click="reasonDialogConfirm()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      // 操作的申请人id
      rowId: "",

      // 审核不通过理由
      passReasonTextarea: "",

      // 审核不通过理由模态框
      dialogVisible: false,

      //当前页数
      currentPage: 1,

      // 页面大小
      pageSize: 8,

      // 总数
      total: 400,

      // 查询时间
      queryData: "",

      // 初始化日期选择组件参数
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      // 日期组件选中的值 时间戳
      selectedAccountTimestamp: "",

      // 类型下拉框选中的账户类型
      accountTypeValue: "",

      // 状态下拉框选中的账户类型
      accountStatusValue: "",

      // 输入框输入的申请人编号
      inputAccountId: "",

      // 账户信息表格数据
      accountData: [],
    };
  },
  computed: {},
  methods: {
    handleClose() {},
    // 审核理由模态框取消
    reasonDialogCancel() {
      this.rowId = "";
      this.dialogVisible = false;
    },

    // 审核理由模态框确认
    async reasonDialogConfirm() {
      const Data = {
        id: this.rowId,
        reason: this.passReasonTextarea,
      };
      const res = await get("/accountApply/checkNoPass", Data);
      this.rowId = "";
      this.dialogVisible = false;
      this.getAllAccountData();
    },
    // 审核不通过弹出理由模态框
    auditFail(id) {
      this.dialogVisible = true;
      this.rowId = id;
    },

    // 审核通过
    async auditPass(id) {
      const Data = {
        id: id,
      };
      const res = await get("/accountApply/checkPass", Data);
      this.getAllAccountData();
    },

    // 时间戳格式化
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

    // 查询账户变动信息
    queryAllAccountData() {
      let queryData = {};
      if (this.selectedAccountTimestamp) {
        queryData = {
          status: this.accountStatusValue,
          applyType: this.accountTypeValue,
          userId: this.inputAccountId,
          beginTime: this.selectedAccountTimestamp[0],
          endTime: this.selectedAccountTimestamp[1],
        };
      } else {
        queryData = {
          status: this.accountStatusValue,
          applyType: this.accountTypeValue,
          userId: this.inputAccountId,
        };
      }

      // 剔除没选择的项目
      for (const key in queryData) {
        if (!queryData[key] || queryData[key] === 0) {
          delete queryData[key];
        }
      }
      this.currentPage = 1;
      this.queryData = queryData;
      this.getAllAccountData();
    },

    // 获取账户变更信息
    async getAllAccountData() {
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      const res = await get("/accountApply/pageQueryAccountApply", {
        ...data,
        ...this.queryData,
      });
      this.accountData = res.data.list;
      this.pageSize = res.data.pageSize;
      this.total = res.data.total;
    },

    // 点击查询按钮事件
    Inquire() {},

    // 监听页面大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllAccountData();
    },
    // 监听页数改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllAccountData();
    },
  },
  created() {
    // 获取账户变动信息
    this.getAllAccountData();
  },
  mounted() {},
};
</script>
<style scoped>
.header {
  display: flex;
  box-sizing: border-box;
  padding: 10px 0px 20px;
}

.tableArea {
  width: 100%;
}

.pageSelect {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>